<template>
  <div style="margin-top: 50px">
    <el-form :model="state" ref="productRelationForm" label-width="120px" class="form-inner-container" size="small">
      <el-form-item label="关联专题：">
        <el-transfer style="display: inline-block" filterable :filter-method="filterMethod" filter-placeholder="请输入专题名称" v-model="selectSubject" :titles="subjectTitles" :data="subjectList"> </el-transfer>
      </el-form-item>
      <el-form-item label="关联优选：">
        <el-transfer style="display: inline-block" filterable :filter-method="filterMethod" filter-placeholder="请输入优选名称" v-model="selectPrefrenceArea" :titles="prefrenceAreaTitles" :data="prefrenceAreaList"> </el-transfer>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button size="default" @click="handlePrev">上一步，填写商品属性</el-button>
        <el-button type="primary" size="default" @click="handleFinishCommit">完成，提交商品</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { fetchListAll as fetchSubjectList } from '@/plugins/subject'
import { fetchList as fetchPrefrenceAreaList } from '@/plugins/prefrenceArea'
import { reactive, onBeforeMount, computed } from 'vue'

const props = defineProps({
  value: Object,
  isEdit: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['prevStep', 'finishCommit'])

let state = reactive(props.value)

let subjectList = reactive([])
//专题左右标题
let subjectTitles = reactive(['待选择', '已选择'])
//所有专题列表
let prefrenceAreaList = reactive([])
//专题左右标题
let prefrenceAreaTitles = reactive(['待选择', '已选择'])

onBeforeMount(() => {
  state.isEdit = props.isEdit
  getSubjectList()
  getPrefrenceAreaList()
})

const selectSubject = computed({
  get: function () {
    let subjects = reactive([])
    if (state.subjectProductRelationList == null || state.subjectProductRelationList.length <= 0) {
      return subjects
    }
    for (let i = 0; i < state.subjectProductRelationList.length; i++) {
      subjects.push(state.subjectProductRelationList[i].subjectId)
    }
    return subjects
  },
  set: function (newValue) {
    state.subjectProductRelationList = []
    for (let i = 0; i < newValue.length; i++) {
      state.subjectProductRelationList.push({ subjectId: newValue[i] })
    }
  }
})

const selectPrefrenceArea = computed({
  get: function () {
    let prefrenceAreas = reactive([])
    if (state.prefrenceAreaProductRelationList == null || state.prefrenceAreaProductRelationList.length <= 0) {
      return prefrenceAreas
    }
    for (let i = 0; i < state.prefrenceAreaProductRelationList.length; i++) {
      prefrenceAreas.push(state.prefrenceAreaProductRelationList[i].prefrenceAreaId)
    }
    return prefrenceAreas
  },
  set: function (newValue) {
    state.prefrenceAreaProductRelationList = reactive([])
    for (let i = 0; i < newValue.length; i++) {
      state.prefrenceAreaProductRelationList.push({ prefrenceAreaId: newValue[i] })
    }
  }
})

function filterMethod(query, item) {
  return item.label.indexOf(query) > -1
}
function getSubjectList() {
  fetchSubjectList().then(response => {
    let list = response.data
    for (let i = 0; i < list.length; i++) {
      subjectList.push({
        label: list[i].title,
        key: list[i].id
      })
    }
  })
}
function getPrefrenceAreaList() {
  fetchPrefrenceAreaList().then(response => {
    let list = response.data
    for (let i = 0; i < list.length; i++) {
      prefrenceAreaList.push({
        label: list[i].name,
        key: list[i].id
      })
    }
  })
}

function handlePrev() {
  emits('prevStep', state)
}
function handleFinishCommit() {
  emits('finishCommit', state)
}
</script>

<style scoped></style>
